import React, { memo, useEffect, useState } from "react";
import { getList, add, del ,hui,edit,search} from "../axios/user";
import {
  Space,
  Table,
  Button,
  message,
  Popconfirm,
  Form,
  Drawer,
  Input,
} from "antd";
const Cart = memo(() => {
  const [list, setList] = useState([]);
  const [open, setOpen] = useState(false);
  const onClose = () => {
    setOpen(false);
  };
  const init = async () => {
    let res = await getList();
    setList(res);
  };
  useEffect(() => {
    init();
  }, []);
  const [a, seta] = useState("");
  //确认删除
  const confirm = async (id) => {
    await del(id);
    init();
    message.success("删除成功");
  };

  const cancel = () => {
    message.error("取消删除");
  };
  const onFinish = async (values) => {
    if (a === "") {
      await add({
        ...values,
        id: new Date().getTime(),
        key: new Date().getTime(),
      });
      init();
      form.resetFields();
    }
    if(a !==""){
      await edit(a,values)
      init()
      form.resetFields();
    }
    setOpen(false);
  };
  const onFinish1 = async (values)=>{
     let obj = {}
     for(let k in values){
      if(values[k]){
        obj[k] = values[k]
      }
     }
    let res = await search(obj)
    setList([...res])
  } 
  const columns = [
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "年龄",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "性别",
      dataIndex: "sex",
      key: "sex",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <Button
            onClick={async() => {
              seta(record.id)
              setOpen(true)
              let res = await hui(record.id)
              form.setFieldsValue(res)
            }}
          >
            修改
          </Button>
          <Popconfirm
            title="删除功能"
            description="你确定要删除吗?"
            onConfirm={() => confirm(record.id)}
            onCancel={cancel}
            okText="是"
            cancelText="否"
          >
            <Button>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];
  const [form] = Form.useForm();
  const [searchForm] = Form.useForm();
  return (
    <div>
       <Form name="search" onFinish={onFinish1} form={searchForm}>
          <Form.Item label="name" name="name_like">
            <Input />
          </Form.Item>
          <Form.Item label="最小年龄" name="age_gte">
            <Input />
          </Form.Item>
          <Form.Item label="最大年龄" name="age_lte">
            <Input />
          </Form.Item>
          <Button htmlType="submit">确定</Button>
          <Button onClick={async()=>{init();searchForm.resetFields()}}>重置</Button>
        </Form>
      <Table dataSource={list} columns={columns} />
      <Button
        onClick={() => {
          seta("")
          setOpen(true);
        }}
      >
        添加用户
      </Button>
      <Drawer title="添加" placement="right" onClose={onClose} open={open}>
        <Form name="basic" onFinish={onFinish} form={form}>
          <Form.Item label="name" name="name">
            <Input />
          </Form.Item>
          <Form.Item label="age" name="age">
            <Input />
          </Form.Item>
          <Form.Item label="sex" name="sex">
            <Input />
          </Form.Item>
          <Button htmlType="submit">确定</Button>
        </Form>
      </Drawer>
    </div>
  );
});

export default Cart;
